<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('立体库库存总览')"/>
    <link th:href="@{/assets/libs/layui/css/layui.css}" media="all" rel="stylesheet">
    <style>
        [v-cloak] {
            display: none;
        }
        .el-date-editor.el-input, .el-date-editor.el-input__inner {
            width: 200px!important;
        }
        .el-input__icon {
            line-height: 0!important;
        }
    </style>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li v-if="checkedSearch.indexOf('物料编码') != -1">
                            物料编码：<input type="text" name="itemCode"/>
                        </li>
                       <!-- <li v-if="checkedSearch.indexOf('物料名称') != -1">
                            物料名称：
                            <select name="itemName">
                                <option value="">全部</option>
                                <option th:each="name:${itemName}" th:text="${name.itemName}"></option>
                            </select>
                        </li>-->
                        <li v-if="checkedSearch.indexOf('批次') != -1" style="position: relative">
                            批次：
                            <input type="text" placeholder="请按格式输入：2021/01/01/1" class="inputInfo" v-model="searchBatch" @focus="focusFn()" @blur="searchBatchYZ()"/>
                            <ul id="ul_" v-show="showList" style="position: absolute;right: 0;width: 200px;height: 285px;z-index: 10;background-color: #fff;overflow: auto;border: 1px solid #dddddd;padding-left: 5px">
                                <li style="cursor: pointer;width: 100%" v-for="(item, index) in batchList" :key="index" @click="chooseBatch(item.batchName)">{{item.batchName}}</li>
                            </ul>
                            <input type="hidden" name="batch" v-model="searchBatch">
                        </li>
                        <li v-show="checkedSearch.indexOf('入库时间') != -1">
                            <label>入库时间：</label>
                            <el-date-picker
                                name="startTime"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                v-model="startTimeValue"
                                type="datetime"
                                @change="compare"
                                placeholder="开始时间">
                            </el-date-picker>
                            <span>-</span>
                            <el-date-picker
                                name="endTime"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                v-model="endTimeValue"
                                type="datetime"
                                @change="compare"
                                placeholder="结束时间">
                            </el-date-picker>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()" @click="searchBatchReset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            <a class="btn btn-success btn-rounded btn-sm" @click="moreSearch()"><i class="fa fa-edit"></i>&nbsp;更多</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        <el-dialog title="搜索条件" width="200px" :visible.sync="showMore">
            <el-row>
                <el-col :span="24">
                    <el-checkbox style="margin-left: 28px" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                    <el-checkbox-group v-model="checkedSearch" @change="handleCheckedSearchChange">
                        <el-checkbox style="display: block;margin-left: 28px" v-for="item in searches" :label="item" :key="item" v-cloak>{{item}}</el-checkbox>
                    </el-checkbox-group>
                </el-col>
            </el-row>
        </el-dialog>
        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="stockOverview:export">
                <i class="fa fa-download"></i> 导出
            </a>
            <a class="btn btn-primary" onclick="$.table.print()">
                <i class="fa fa-plus"></i> 打印
            </a>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table" data-mobile-responsive="true" style="white-space: nowrap"></table>
        </div>
    </div>
</div>

<div th:include="include :: footer"></div>
<script th:inline="javascript">
    var prefix = ctx + "stockOverview";

    const searchOptions = ['物料名称', '批次', '入库时间'];

    var app = new Vue({
        el: '.container-div',
        data: {
            showMore: false,
            checkAll: false,
            checkedSearch: ['物料名称', '批次', '入库时间'],
            searches: searchOptions,
            isIndeterminate: true,
            items: [],
            startTimeValue: '',
            endTimeValue: '',
            batchs: [],
            searchBatch: '',
            showList: false,
            batchList: [],
        },
        methods: {
            // 函数防抖
            _debounce(wait){
                clearTimeout(this.timer);
                this.timer = setTimeout(() => {
                    this.getSelectData(this.searchBatch.trim());
                }, wait)
            },
            //已选批次
            chooseBatch(val){
                this.searchBatch = val;
            },
            //重置输入批次
            searchBatchReset(){
                this.searchBatch = '';
            },
            //验证输入批次
            searchBatchYZ(){
                if(this.searchBatch.trim() != ''){
                    var arr = [];
                    for(var i = 0; i < this.batchs.length; i++){
                        arr.push(this.batchs[i].batchName);
                    }
                    var index = $.inArray(this.searchBatch.trim(), arr);
                    if(index < 0){
                        $.modal.alertError("不存在该批次");
                        this.searchBatchReset();
                    }
                }
            },
            //批次输入框聚焦
            focusFn(){
                if(document.getElementsByClassName('inputInfo')[0] == document.activeElement){
                    this._debounce(500);
                }
                this.showList = true;
            },
            //根据批次输入框内容匹配批次列表
            getSelectData(val){
                this.batchList = [];
                for(var i = 0; i < this.batchs.length; i++){
                    if(this.batchs[i].batchName.indexOf(val) != -1){
                        this.batchList.push(this.batchs[i]);
                    }
                }
            },
            compare: function(){
                if(this.startTimeValue != '' && this.endTimeValue != ''){
                    if(this.startTimeValue != null && this.endTimeValue != null){
                        var a = new Date(this.startTimeValue);
                        var b = new Date(this.endTimeValue);
                        if(a > b){
                            $.modal.alertWarning("结束时间需大于开始时间");
                            this.flag = true;
                        }else{
                            this.flag = false;
                        }
                    }else if(this.startTimeValue == null){
                        this.startTimeValue = '';
                        this.flag = false;
                    }else if(this.endTimeValue == null){
                        this.endTimeValue = '';
                        this.flag = false;
                    }
                }
            },
            //获取批次列表
            getBatchs: function(){
                var that = this;
                $.ajax({
                    cache: true,
                    type: "POST",
                    url: "/boxItembacth/findList",
                    data: {},
                    async: false,
                    error: function(request){
                        $.modal.alertError("系统错误");
                    },
                    success: function(data){
                        that.batchs = data.rows;
                    }
                });
            },
            //获取物料列表
            getItems: function(){
                var that = this;
                $.ajax({
                    cache: true,
                    type: "POST",
                    url: "/system/itemInfo/findList",
                    data: {},
                    async: false,
                    error: function(request){
                        $.modal.alertError("系统错误");
                    },
                    success: function(data){
                        that.items = data.rows;
                    }
                });
            },
            moreSearch(){
                this.showMore = true;
            },
            handleCheckAllChange(val){
                this.checkedSearch = val ? searchOptions : [];
                this.isIndeterminate = false;
            },
            handleCheckedSearchChange(value){
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.searches.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.searches.length;
            }
        },
        created(){
            this.getItems();
            this.getBatchs();
        },
        watch: {
            'searchBatch': {
                handler: function(){
                    this.focusFn();
                }
            }
        },
        mounted(){
            let that = this;
            document.addEventListener('click', function(e){
                if(e.target.className != 'inputInfo'){
                    that.$nextTick(() => {
                        that.showList = false;
                    })
                }
            })
            document.getElementById('ul_').onmousedown = function(e){
                if(e && e.preventDefault){
                    e.preventDefault();
                }else{
                    window.event.returnValue = false;
                }
                return false;
            };
        }
    })

    $(function () {
        var options = {
            url: prefix + "/findList",
            modalName: "立体库库存总览数据",
            exportUrl: prefix + "/export",
            showExport: false,
            columns: [
                {
                    field: 'itemId',
                    title: 'ID',
                    align: 'center',
                    visible: false
                },
                {
                    field: 'itemCode',
                    title: '物料编码',
                    align: 'center',
                    visible: false
                },
                {
                    field: 'itemName',
                    title: '物料名称',
                    align: 'center',
                    visible: true
                },
                {
                    field: 'pd',
                    title: '生产日期',
                    align: 'center',
                    visible: true
                },
                {
                    field: 'itemSpec',
                    title: '规格（容量）',
                    align: 'center',
                    visible: true
                },
                {
                    field: 'itemQuantity',
                    title: '规格（数量）',
                    align: 'center',
                    visible: true
                },
                {
                    field: 'itemTotal',
                    title: '批次总数',
                    align: 'center',
                    visible: true
                },
                {
                    field: 'itemSumTotal',
                    title: '库存总数',
                    align: 'center',
                    visible: true
                }
            ]
        };
        $.table.init(options);
    });
</script>
</body>
</html>
